<script setup lang="ts">
import { useTablePage } from '@/hooks/useTablePage'
import { getPageList, deleteById } from '@/api/system/dept'
import { Refresh, Search, Plus } from "@element-plus/icons-vue"

const DeptEdit = defineAsyncComponent(() => import('./components/DeptEdit.vue'))

/**
 * 表格参数
 */
const {
  tabRef,
  queryFormRef,
  editRef,
  loading, query, tableList,
  queryData,
  handleRefresh,
  handleQuery,
  resetForm,
  handleDelete,
  handleEdit,
  handleAdd,
} = useTablePage<SysDeptType, SysDeptQuery>({ getPageList, deleteById })


// 获取行的信息，使勾选不变
function getRowKeys(row: any) {
  return row.id;
};

// 点击行，展开、收起子菜单
function toggleRow(row: SysMenuType) {
  //console.log('toggleRow', row);
  tabRef.value.toggleRowExpansion(row)
}
</script>

<template>
  <div class="h-full w-full flex flex-col">
    <div class="h-50px w-full border border-solid bg-#fff border-[#ddd] rounded-2 p-8px">
      <div class="h-full w-full flex items-center">
        <el-form class="h-full" inline :model="query" ref="queryFormRef">
          <el-form-item label="部门名称" prop="name">
            <el-input v-model="query.name" placeholder="请输入部门名称" clearable class="w200px" />
          </el-form-item>
          <el-form-item class="ml-20px">
            <el-button class="search-btn" :icon="Search" @click="handleQuery()">查 询</el-button>
            <el-button class="reset-btn" :icon="Refresh" @click="resetForm(queryFormRef)">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="h-[calc(100%-60px)] w-full border border-solid bg-#fff border-[#ddd] rounded-2 mt-10px px-10px">
      <div class="h-50px w-full py-10px flex items-center justify-between">
        <el-button class="tab-func-btn" :icon="Plus" @click="handleAdd()">新 增</el-button>
        <el-tooltip effect="dark" content="刷新" placement="top">
          <el-icon class="mr-50px cursor-pointer transition ease-in-out delay-100 hover:scale-130 duration-10"
            :size="20" @click="handleRefresh">
            <Refresh />
          </el-icon>
        </el-tooltip>
      </div>
      <el-table class="table-con h-[calc(100%-60px)]" ref="tabRef" :data="tableList" v-loading="loading"
        default-expand-all element-loading-text="正在加载中..." :header-cell-style="{ backgroundColor: '#F2F3F5' }"
        :row-key="getRowKeys" @row-click="toggleRow">
        <el-table-column header-align="center" prop="name" label="部门名称" />
        <el-table-column align="center" prop="fullName" label="部门全称" />
        <el-table-column align="center" prop="status" label="状态">
          <template #default="{ row }">
            <el-tag :type="row.status ? 'success' : 'danger'">{{ row.status ? '正常' : '停用' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="updateTime" label="创建时间" />
        <el-table-column align="center" label="操作" width="220" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click.stop="handleAdd(row.id)">新增下级</el-button>
            <el-button type="primary" size="small" @click.stop="handleEdit(row)">编辑</el-button>
            <el-popconfirm @confirm="handleDelete(row.id)" width="auto" :title="`确定永久删除【${row?.name}】吗？`">
              <template #reference>
                <el-button :disabled="row.pid == 0 ? true : false" type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <DeptEdit ref="editRef" @refresh="queryData"></DeptEdit>
  </div>
</template>

<style scoped lang="scss"></style>